import React, { useState,useEffect } from 'react'

// function App(){
//     let datalist = [];
//     setTimeout(()=>{
//         datalist = ['laoxie','jingjing']
//         console.log('请求完成',datalist)
//     },1000)
//     return (
//         <div>
//             <h4>用户列表</h4>
//             <ul>
//                 {
//                     datalist.map(item=><li>{item}</li>)
//                 }
//             </ul>
//         </div>
//     )
// }

// class App extends React.PureComponent {
//     state = {
//         datalist:[]
//     }
//     componentDidMount(){
//         setTimeout(()=>{
//             this.setState({
//                 datalist:['laoxie','jingjing']
//             },()=>{
//                 console.log('请求完成',this.state.datalist)
//             })
//         },1000)
//     }
//     render() {
//         const {datalist} = this.state;
//         return (
//             <div>
//                 <h4>用户列表</h4>
//                 <ul>
//                     {
//                         datalist.map(item => <li key={item}>{item}</li>)
//                     }
//                 </ul>
//             </div>
//         )
//     }
// }


function App() {
    console.log('start')

    // const [num,setNumber] = useState(10);
    // const [qty,setQty] = useState(10);


    const [datalist, setDatalist] = useState([])

    useEffect(function(){
        // 这个回调函数在渲染结束后执行
        console.log('useEffect')
        setTimeout(() => {
            setDatalist(['laoxie', 'jingjing'])
        }, 1000)
    },[])
    console.log('end');
    return (
        <div>
            <h4>用户列表</h4>
            <ul>
                {
                    datalist.map(item => <li key={item}>{item}</li>)
                }
            </ul>
        </div>
    )
}

export default App